<!--
@description ：投放统计--客户统计
-->

<template>
  <div class="app-container">
    <NormalForm ref="normalForm" :enumOpt="enumOpt" :formList="formList" :operateForm="queryForm"
                @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card" style="padding: 20px">
      <div style="display: flex;justify-content: space-between;margin-bottom: 20px;line-height: 40px">
        <div>总用户数量: {{ allCount }}</div>
        <div>
          <el-button :disabled="tableData.length == 0" plain size="small" type="info" @click="visible = true">
            转为拓客线索
          </el-button>
          <el-button size="small" type="primary" @click="exportDetail" v-has-permi="['placment:customer:export']">数据导出</el-button>
        </div>
      </div>
      <el-table ref="tableRef" v-loading="tableLoading" :data="tableData" :row-style="{ height: '40px' }"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" max-height="460"
                row-key="journeyConfigId"
                @selection-change="handleSelectionChange">
        <el-table-column align="center" fixed type="selection" width="45">
        </el-table-column>
        <el-table-column :min-width="120" align="center" label="手机号" prop="mobile"></el-table-column>
        <el-table-column :min-width="120" :show-overflow-tooltip="false" align="center" label="姓名"
                         prop="name"></el-table-column>
        <el-table-column :min-width="120" :show-overflow-tooltip="false" align="center" label="性别"
                         prop="gender"></el-table-column>
        <el-table-column :min-width="160" align="center" label="来源页面" prop="pageTitle"
                         show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="来源渠道" prop="customerSource" :min-width="150"></el-table-column>
        <el-table-column align="center" label="进入时间" prop="startTime" :min-width="170"></el-table-column>
        <el-table-column align="center" label="添加企微状态" prop="wxAddState" :min-width="120">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.wxAddState == '待添加'">待添加
            </el-tag>
            <el-tag type="success" v-if="scope.row.wxAddState == '已添加'">已添加
            </el-tag>
            <el-tag type="warning" v-if="scope.row.wxAddState == '已删除'">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="浏览时长" prop="eventDuration" :min-width="140"></el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
    </div>
    <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="visible" append-to-body
               title="转为拓客线索"
               width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="请输入号码库名称" prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" :loading="subLoading">确 定</el-button>
        <el-button @click="visible = false, form.name = ''">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {
  addIocLead,
  getCapitalSource,
  getCapitalTotalCustomer,
  queryCapitalCustomerDetail
} from "@/api/placementStatistics";
import moment from "moment/moment";
import {downLoadFile} from "@/utils/common";

export default {
  name: "placementCustomerStatisticsList", //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      queryForm: {
        pageTitle: '',
        sourceId: '',
        timeType: '0',
        selectTime: [],
        wxAddState: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '来源页面',
          value: '',
          prop: 'pageTitle',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '来源渠道',
          value: '',
          prop: 'sourceId',
          type: 'CASCADER',
          emunName: 'sourceIdList',
          props: {checkStrictly: true},
        },
        {
          label: '添加企微状态',
          value: '',
          prop: 'wxAddState',
          type: 'SELECT',
          emunName: 'statesList'
        },
        {
          label: '',
          value: '',
          prop: 'timeType',
          type: 'RADIO_DATE_SELECT',
          emunName: 'timeTypeOpt',
          xs: 24,
          ls: 12,
          md: 8,
          lg: 6,
          xl: 4,
        },
        {
          label: '',
          value: [],
          prop: 'selectTime',
          type: 'DATE_RANGE',
          emunName: '',
          formate: 'yyyy-MM-dd',
        },
      ],
      enumOpt: {
        sourceIdList: [],
        statesList: [],
        timeTypeOpt: [
          {dictValue: '0', dictLabel: '今日'},
          {dictValue: '1', dictLabel: '最近7天'},
          {dictValue: '2', dictLabel: '最近30天'},
        ],
      },
      tableData: [
        {mobile: '18472857294', name: '李', gender: '先生'},
        {mobile: '19382847392', name: '王', gender: '先生'},
        {mobile: '19382848284', name: '钱', gender: '女士'},
        {mobile: '19483839882', name: '赵', gender: '先生'},
      ],
      tableLoading: false,
      total: 0,
      allCount: 0,
      visible: false,
      form: {
        name: ''
      },
      rules: {
        name: [{required: true, message: '请输入号码库名称', trigger: 'blur'}],
      },
      checkedList: [],
      subLoading: false
    }
  },
  watch: {},
  methods: {
    handleQuery() {
      console.log(this.queryForm, 'queryForm')
      this.queryForm.pageNum = 1
      this.getList()
    },
    handleReset() {
      this.queryForm = {
        pageTitle: '',
        sourceId: '',
        timeType: '0',
        selectTime: [moment(new Date()).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD')],
        wxAddState: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.$refs.normalForm.radioDateSelect('0')
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getList()
    },
    getList() {
      let customerSource = ''
      let customerWay = ''
      if (this.queryForm.sourceId) {
        if (this.queryForm.sourceId.length == 1) {
          customerSource = this.queryForm.sourceId[0]
        } else if (this.queryForm.sourceId.length == 2) {
          customerWay = this.queryForm.sourceId[1]
        }
      }
      let obj = {
        startTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[0] : moment(new Date()).format('YYYY-MM-DD'),
        endTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[1] : moment(new Date()).format('YYYY-MM-DD'),
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        pageTitle: this.queryForm.pageTitle,
        wxAddState: this.queryForm.wxAddState,
        customerSource,
        customerWay
      }
      console.log(obj, 'obj')
      this.tableData = []
      this.tableLoading = true
      queryCapitalCustomerDetail(obj).then(res => {
        if (res.code == 200) {
          this.total = res.total || 0
          this.tableData = res.rows || []
        }
        this.tableLoading = false
      }).catch(() => {
        this.tableData = []
        this.tableLoading = false
      })
    },
    handleSelectionChange(val) {
      console.log(val, 'val')
      this.checkedList = val
    },
    submit() {
      this.subLoading = true
      this.$refs.form.validate(valid => {
        if (valid) {
          let customerSource = ''
          let customerWay = ''
          if (this.queryForm.sourceId) {
            if (this.queryForm.sourceId.length == 1) {
              customerSource = this.queryForm.sourceId[0]
            } else if (this.queryForm.sourceId.length == 2) {
              customerWay = this.queryForm.sourceId[1]
            }
          }
          let arr = this.checkedList.map(item => item?.customerId)
          let params = {
            startTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[0] : moment(new Date()).format('YYYY-MM-DD'),
            endTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[1] : moment(new Date()).format('YYYY-MM-DD'),
            pageNum: this.queryForm.pageNum,
            pageSize: this.queryForm.pageSize,
            pageTitle: this.queryForm.pageTitle,
            wxAddState: this.queryForm.wxAddState,
            customerSource,
            customerWay,
            customerIdList: arr,
            ocLeadName: this.form.name
          }
          addIocLead(params).then(res => {
            this.$message.success('操作成功!')
            this.visible = false
            this.subLoading = false
          }).catch(() => {
            this.subLoading = false
          })
        }else{
          this.subLoading = false
        }
      })
    },
    exportDetail() {
      let customerSource = ''
      let customerWay = ''
      if (this.queryForm.sourceId) {
        if (this.queryForm.sourceId.length == 1) {
          customerSource = this.queryForm.sourceId[0]
        } else if (this.queryForm.sourceId.length == 2) {
          customerWay = this.queryForm.sourceId[1]
        }
      }
      let arr = this.checkedList.map(item => item?.customerId)
      let params = {
        startTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[0] : moment(new Date()).format('YYYY-MM-DD'),
        endTime: this.queryForm.selectTime && this.queryForm.selectTime.length == 2 ? this.queryForm?.selectTime[1] : moment(new Date()).format('YYYY-MM-DD'),
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        pageTitle: this.queryForm.pageTitle,
        wxAddState: this.queryForm.wxAddState,
        customerSource,
        customerWay,
        customerIdList: arr,
      }
      console.log(params,)
      downLoadFile('/admin/capital/exportCustomerDetail', params, `用户详情--${moment(new Date()).format('YYYYMMDD')}.xlsx`, () => {
      }, 'post')
    },
    getSource() {
      getCapitalSource().then(res => {
        if (res.code == 200) {
          this.enumOpt.sourceIdList = res?.data?.map(item => {
            return {
              value: item.scrmGetGuestPlatId,
              label: item.scrmGetGuestPlatName,
              children: item?.children?.map(itm => {
                return {
                  label: itm.scrmSourceName,
                  value: itm.scrmGetGuestGourceId,
                }
              })
            }
          })
        }
      })
    },
    getStates() {
      this.getDicts('wecom_add_state').then(res => {
        this.enumOpt.statesList = res.data || []
      })
    }
  },
  mounted() {
    this.getSource()
    this.getStates()
    getCapitalTotalCustomer().then(res => {
      this.allCount = res.data?.count
    })
    this.$refs.normalForm.radioDateSelect('0')
    this.handleQuery()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';

.app-container {
  height: 100%;
  padding: 0;
}

::v-deep .el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #cdf3df !important;
  color: #06c160 !important;
}

::v-deep.el-tag.el-tag--info {
  background-color: #f4f4f5 !important;
  border-color: #e9e9eb !important;
  color: #909399 !important;
}

::v-deep.el-tag.el-tag--danger {
  background-color: #fdedee !important;
  border-color: #fadcde !important;
  color: #e74e59 !important;
}
</style>
